<!DOCTYPE html>
<html>
<head>
    <title>表单示例</title>
    <style>
        body { font-family: Arial; padding: 20px; background: #f5f7ff; }
        .form-container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
        h1 { color: #1a2980; text-align: center; margin-bottom: 25px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; color: #555; font-weight: 500; }
        input, select, textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 12px; font-size: 1rem; background: #f8f9ff; }
        button { width: 100%; padding: 16px; background: linear-gradient(to right, #1a2980, #26d0ce); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(26,41,128,0.3); }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>用户注册</h1>
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="请输入您的姓名">
        </div>
        <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" placeholder="example@domain.com">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="至少8个字符">
        </div>
        <div class="form-group">
            <label for="gender">性别</label>
            <select id="gender">
                <option value="">请选择</option>
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="message">个人简介</label>
            <textarea id="message" rows="4" placeholder="介绍一下你自己..."></textarea>
        </div>
        <button type="button">注册账号</button>
    </div>
</body>
</html>